import { useState } from 'react'

const App = () => {

  // 多个状态定义原则：建议使用多次useState分离业务
  // 不建议写法，缺点：修改数据麻烦，业务未分离维护麻烦
  // const [data, setData] = useState({
  //   count: 0,
  //   user: { name: 'tom', age: 18 },
  //   goods: { id: 10, name: 'xxx' }
  // })
  // 推荐的写法：优点：改数据便利，抽离业务逻辑状态方便
  // const [count, setCount] = useState(0)
  // const [user, setUser] = useState({ name: 'tom', age: 18 })
  // const [goods, setGoods] = useState({ id: 10, name: 'xxx' })

  // useState书写位置元素：不能写在 分支循环语句中
  const [count, setCount] = useState(0)
  const [user, setUser] = useState({ name: 'tom', age: 18 })

  return (
    <div className="app">
      App组件
      <hr />
      <div>
        <p>计数器：{count}</p>
        <button onClick={() => setCount(count + 1)}>+1</button>
      </div>
    </div>
  )
}

export default App